<!--
 * @Author: linZeJian
 * @Date: 2022-08-24 10:53:55
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-11-08 14:28:29
 * @Description: 
-->
<template>
  <div v-if="option.display">
    <uni-forms-item
      :label="option.label"
      :required="option.required"
      :rules="[{ required: option.required, errorMessage: '必填项不能为空' }]"
      :name="option.prop"
    >
    </uni-forms-item>
    <div style="border-bottom: 1px solid #d4d4d4;margin-top:-20px;padding-left: 10px;">
      <div v-if="childrenColumnCopy && childrenColumnCopy.column.length > 0">
        <!-- <a-form-only
            v-bind:form="comValue"
            :option="childrenColumnCopy"
            :detail="detail"
          ></a-form-only> -->
        <uni-forms
          ref="valiForm"
          :modelValue="comValue"
          label-position="top"
          label-width="auto"
        >
          <template v-if="childrenColumnCopy.column">
            <forms-item
              :option="childrenColumnCopy"
              :forms="comValue"
              @change="change"
            >
            </forms-item>
          </template>
          <template v-if="childrenColumnCopy.group">
            <view
              v-for="(groupItem, index) in childrenColumnCopy.group"
              :key="groupItem.prop"
            >
              <view class="ptb20 size16">{{ groupItem.label }}</view>
              <template v-if="groupItem.column">
                <forms-item
                  :option="groupItem"
                  :forms="comValue"
                  @change="change"
                >
                </forms-item>
              </template>
              <template v-else>
                <view
                  style="
                    font-size: 14px;
                    background: #ffffff;
                    color: #a4a4a4;
                    padding: 6px 20px;
                    text-align: center;
                  "
                  >暂无相关数据</view
                >
              </template>
            </view>
          </template>
          <!-- <template v-else>
            <view
              style="
                font-size: 14px;
                background: #ffffff;
                color: #a4a4a4;
                padding: 6px 20px;
                text-align: center;
              "
              >暂无相关数据</view
            >
          </template> -->
        </uni-forms>
      </div>
      <div
        v-else
        style="
          font-size: 14px;
          background: #ffffff;
          color: #a4a4a4;
          padding: 6px 20px;
        "
      >
        暂无相关数据
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "auni-group-custom",
  props: {
    option: Object,
    value: [String, Number, Object],
  },
  data() {
    return {
      comValue: this.value[this.option.prop] || {},
    };
  },
  computed: {
    // comValue: {
    //   get() {
    //     // console.log("this.option :>> ", this.option);
    //     return this.value;
    //   },
    //   set(val) {
    //     // 触发value绑定值的交互与更新
    //     this.$emit("input", val);
    //   },
    // },
    // 处理详情模式
    detailValue() {
      if (this.option.detail) {
        return true;
      } else {
        return false;
      }
    },
    childrenColumnCopy() {
      console.log("this.option :>> ", this.option);
      if (this.option.children) {
        return this.option.children;
      } else {
        return [];
      }
    },
  },
  created() {},
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(newV) {},
    },

    comValue: {
      deep: true,
      immediate: true,
      handler(newV) {
        console.log('group comValue :>> ', newV);
        // 触发value绑定值的交互与更新
        this.$emit("input", newV);
        // this.value[this.option.prop] = newV;
        this.$emit("change",newV,this.option.prop)
      },
    },
  },
  methods: {
    // 每一项子项的数据回调
    change(group) {
      // console.log("group :>> ", group);
      this.comValue = Object.assign(this.comValue,group);
    },
  },
};
</script>

<style></style>
